<!DOCTYPE html>
<html>
<head>
    <title>CrowdFlow AI 商家端</title>
    <style>
        body { margin: 0; font-family: Arial, sans-serif; }
        .container { display: flex; height: 100vh; }
        .map-container { flex: 3; position: relative; }
        .sidebar {
            flex: 1;
            background: #f5f7fa;
            padding: 20px;
            box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        }
        .tab { margin-bottom: 20px; }
        .tab-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-right: 5px;
            cursor: pointer;
        }
        .input-group { margin: 15px 0; }
        .chart-placeholder {
            background: #fff;
            height: 200px;
            margin: 10px 0;
            padding: 15px;
            border-radius: 8px;
        }
    </style>
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
    <div class="container">
        <div class="map-container" id="map"></div>
        
        <div class="sidebar">
            <h2>商家智能分析平台</h2>
            
            <div class="tab">
                <button class="tab-button" onclick="switchTab(1)">人流分析</button>
                <button class="tab-button" onclick="switchTab(2)">经营策略</button>
            </div>

            <div id="tab1-content">
                <div class="input-group">
                    <h4>多模态人流密度</h4>
                    <div class="chart-placeholder" id="heatmap-chart">
                        <!-- 热力图数据可视化 -->
                    </div>
                </div>

                <div class="input-group">
                    <h4>人流画像分析</h4>
                    <div class="chart-placeholder" id="demographic-chart">
                        <!-- 人口属性分布图 -->
                    </div>
                </div>
            </div>

            <div id="tab2-content" style="display: none;">
                <div class="input-group">
                    <h4>经营策略优化</h4>
                    <input type="text" placeholder="输入商圈名称" style="width: 100%; padding: 8px;">
                    <div class="chart-placeholder">优化建议生成区</div>
                </div>

                <div class="input-group">
                    <h4>智能商业决策</h4>
                    <div class="chart-placeholder">决策支持仪表盘</div>
                </div>

                <div class="input-group">
                    <h4>商业选址推荐</h4>
                    <div class="chart-placeholder" id="location-recommendation">
                        <!-- 推荐位置列表 -->
                    </div>
                </div>
            </div>

            <button style="background: #28a745; color: white; padding: 10px 20px; border: none; margin-top: 20px;">
                生成分析报告
            </button>
        </div>
    </div>

    <script>
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [113.26, 23.12], // 广州中心坐标
            zoom: 12
        });

        // 添加热力图层
        map.on('load', () => {
            map.addSource('heatmap', {
                type: 'geojson',
                data: 'heatmap-data.geojson'
            });
            map.addLayer({
                id: 'heatmap-layer',
                type: 'heatmap',
                source: 'heatmap',
                paint: {}
            });
        });

        function switchTab(tabNumber) {
            document.getElementById('tab1-content').style.display = tabNumber === 1 ? 'block' : 'none';
            document.getElementById('tab2-content').style.display = tabNumber === 2 ? 'block' : 'none';
        }
    </script>
</body>
</html>